<!--字典类型-->
<script setup lang="ts">
import {
  getDictTypePage,
  getDictTypeForm,
  addDictType,
  updateDictType,
  deleteDictTypes,
} from "../../../api/dict";
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { EditPen, Plus, Platform, RemoveFilled } from '@element-plus/icons-vue'
import { DictTypePageVO, DictTypeQuery, DictTypeForm } from "../../../api/dict/types";
import type { TabsPaneContext } from 'element-plus'

defineOptions({
  name: "merchantList",
  inheritAttrs: false,
});

const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const switchStatus = ref(true)
const switchStatus1 = ref(true);
const switchStatus2 = ref(true);
const switchStatus3 = ref(true);
const switchStatus4 = ref(true);
const switchStatus5 = ref(true);
const switchStatus6 = ref(true);
const switchStatus7 = ref(true);
const switchStatus8 = ref(true);
const switchStatus9 = ref(true);
const switchStatus10 = ref(true);
const switchStatus11 = ref(true);
const switchStatus12 = ref(true);
const activeName = ref('first')
const bianji = ref(false)
const bianji2 = ref(false)
const dataStatus = ref('C2C买币')
const queryParams = reactive<DictTypeQuery>({
  pageNum: 1,
  pageSize: 10,
});

const dictTypeList = ref<DictTypePageVO[]>();

const dialog = reactive({
  title: "",
  visible: false,
});

const formData = reactive<DictTypeForm>({
  status: 1,
});

const rules = reactive({
  name: [{ required: true, message: "请输入字典类型名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入字典类型编码", trigger: "blur" }],
  token: [{ required: true, message: "请输入token", trigger: "blur" }],
});

/* 状态切换 */
const handleSwitchChange = (value, switchNumber) => {
  console.log(`开关 ${switchNumber} 的状态改变为 ${value}`);
};

/* 标签页 */
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
/** 查询 */
function handleQuery() {
  loading.value = true;
  getDictTypePage(queryParams)
    .then(({ data }) => {
      dictTypeList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

/** 行复选框选中  */
function handleSelectionChange(selection: any) {
  ids.value = selection.map((item: any) => item.id);
}

/**
 * 打开字典类型表单弹窗
 *
 * @param dicTypeId 字典类型ID
 */
function openDialog(dicTypeId?: number) {
  dialog.visible = true;
  if (dicTypeId) {
    dialog.title = "修改字典类型";
    getDictTypeForm(dicTypeId).then(({ data }) => {
      Object.assign(formData, data);
    });
  } else {
    dialog.title = "新增字典类型";
  }
}

/** 字典类型表单提交 */
function handleSubmit() {
  dataFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      loading.value = false;
      const dictTypeId = formData.id;
      if (dictTypeId) {
        updateDictType(dictTypeId, formData)
          .then(() => {
            ElMessage.success("修改成功");
            closeDialog();
            handleQuery();
          })
          .finally(() => (loading.value = false));
      } else {
        addDictType(formData)
          .then(() => {
            ElMessage.success("新增成功");
            closeDialog();
            handleQuery();
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

/** 关闭字典类型弹窗 */
function closeDialog() {
  dialog.visible = false;
  resetForm();
}

/**  重置字典类型表单 */
function resetForm() {
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();

  formData.id = undefined;
  formData.status = 1;
}

/** 删除字典类型 */
function handleDelete(dictTypeId?: number) {
  const dictTypeIds = [dictTypeId || ids.value].join(",");
  if (!dictTypeIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deleteDictTypes(dictTypeIds).then(() => {
      ElMessage.success("删除成功");
      resetQuery();
    });
  });
}

const dictDataDialog = reactive({
  title: "",
  visible: false,
});

const selectedDictType = reactive({ typeCode: "", typeName: "" }); // 当前选中的字典类型

/** 打开字典数据弹窗 */
function openDictDialog(row: DictTypePageVO) {
  dictDataDialog.visible = true;
  dictDataDialog.title = "【" + row.name + "】字典数据";

  selectedDictType.typeCode = row.code;
  selectedDictType.typeName = row.name;
}

/**  关闭字典数据弹窗 */
function closeDictDialog() {
  dictDataDialog.visible = false;
}

onMounted(() => {
  handleQuery();
});


const value = ref('')
const options = [
  {
    label: '启用',
    value: '1',
  },
  {
    label: '禁用',
    value: '2',
  },
]

const tableData = [
  {
    date: '未支付',
    name: '单号查询未支付，请核对单号是否正确',
    iconType: 'plus'
  },
  {
    date: '超市支付',
    name: '超时支付，不补不退，请引导客户在120秒内支付(120秒就算超时）',
    iconType: 'minus'
  },
  {
    date: '单图不符',
    name: '-',
    iconType: 'remove'
  },
  {
    date: '成功已回调',
    name: '-',
    iconType: 'remove'
  },
  {
    date: '修改渠道',
    name: '单号查询未支付，请核对单号是否正确',
    iconType: 'plus'
  },
  {
    date: '修改金额',
    name: '超时支付，不补不退，请引导客户在120秒内支付(120秒就算超时）',
    iconType: 'minus'
  },
  {
    date: '支付失败',
    name: 'Tom',
    iconType: 'remove'
  },
  {
    date: '视频核实',
    name: 'Tom',
    iconType: 'plus'
  },
]

const tableData1 = []

/* 折叠面板  下拉框 */
const activeNames = ref([''])
const handleChange = (val: string[]) => {
  console.log(val)
}
</script>


<template>
  <div class="app-container">
    <div class="main" style="display: flex;width: 100%;height: 100%; justify-content: space-between;overflow-y: auto;">
      <div class="left" style="width: 40%;height: 900px;display: flex;justify-content: center;">
        <div class="leftcontent"
          style="width: 80%;height: 100%; background-color: white;margin-top: 20px;border: 1px solid lightgray;">
          <div class="img" style="width: 100%;display: flex;justify-content: center;">
            <img src="../../../assets/robot.png" alt="" style="margin-top: 20px;width: 70px;">
          </div>
          <p style="text-align: center;font-size: 20px;font-weight: 600;">AaPayzf_bot
            <el-icon style="color: #1890ff;margin-left: 5px;font-size: 23px;" @click="bianji = true">
              <EditPen />
            </el-icon>
          </p>
          <p style="text-align: center;font-size: 15px;color: #1890ff;">@AaPay2usdt_bot</p>
          <p style="display: flex;justify-content: center"><el-icon style="color: #1890ff;font-size: 16px;">
              <EditPen />
            </el-icon></p>
          <el-form style="padding-left: 20px;padding-right: 20px;width: 100%;box-sizing: border-box;margin-top: -20px;">
            <el-form-item label="地址:" prop="add" style="display: flex;align-items: center;">
              <p style="color: #1890ff;">https://t.me/AaPay2usdt_bot
                <el-tooltip placement="top" effect="light">
                  <img src="../../../assets/qr.png" alt="" style="margin-left: 5px;width: 14px;height: 14px;">
                  <template v-slot:content>
                    <img src="" alt="二维码" style="width: 200px; height: 200px;">
                  </template>
                </el-tooltip>
              </p>
            </el-form-item>
            <el-form-item label="简介:" style="width: 100%;margin-top: -30px;">
              <el-input type="textarea" :rows="9" style="border: none; resize: none;"></el-input>
            </el-form-item>
            <el-form-item label="配置:" style="width: 100%;margin-top: -10px; ">
              <p style="margin-top: -0px;">转发回复消息
                <el-switch v-model="switchStatus" inline-prompt active-text="启用" inactive-text="禁用"
                  @change="handleSwitchChange" />
              </p>
              <p style="margin-top: -10px;">同一订单<el-input type="number"
                  style="width: 80px;margin-left: 5px;margin-right: 5px;"></el-input>分钟内不能重复查询</p>
              <p style="margin-top: -10px;">等待支付<el-input type="number"
                  style="width: 80px;margin-left: 5px;margin-right: 5px;"></el-input>分钟内不转发查询</p>
              <p style="margin-top: -10px;">查单消息<el-input type="number"
                  style="width: 80px;margin-left: 5px;margin-right: 5px;"></el-input>分钟内不回复自动加急</p>
              <p style="margin-top: -10px;display: flex; align-items: center;">欧易数据来源:
                <el-radio label="C2C买币" v-model="dataStatus" style="margin-left: 5px;"></el-radio>
                <el-radio label="大宗交易" v-model="dataStatus"></el-radio>
              </p>
            </el-form-item>
            <el-form-item label="频道:" style="margin-top: -30px;">
              <p color="gray" style="margin-top: -0px;">暂未订阅频道 </p>
            </el-form-item>
            <el-form-item label="看板" style="margin-top: -30px;">
              <div style=" width: 100%; height: 150px; border: 1px solid lightgray;padding: 10px;">
                <div style="display: flex; width: 100%;justify-content: space-between;">
                  <el-switch v-model="switchStatus1" inline-prompt active-text="&emsp;绑定商户&emsp;" inactive-text="绑定商户"
                    style="width: 100px;margin-right: 10px;" @change="handleSwitchChange" />
                  <el-switch v-model="switchStatus2" inline-prompt active-text="绑定供应商" inactive-text="绑定供应商"
                    style="width: 100px;" @change="handleSwitchChange" />
                  <el-switch v-model="switchStatus3" inline-prompt active-text="&emsp;绑定代理&emsp;" inactive-text="绑定代理"
                    style="width: 100px;" @change="handleSwitchChange" />
                </div>

                <div style="width: 110%; display: flex; justify-content: space-between;">
                  <el-switch v-model="switchStatus4" inline-prompt active-text="查群组" inactive-text="查群组"
                    style="width: 100px;" @change="handleSwitchChange" />
                  <el-switch v-model="switchStatus5" inline-prompt active-text="查用户" inactive-text="查用户"
                    style="width: 100px;" @change="handleSwitchChange" />
                  <el-switch v-model="switchStatus6" inline-prompt active-text="查绑定" inactive-text="查绑定"
                    style="width: 100px;" @change="handleSwitchChange" />
                  <el-switch v-model="switchStatus7" inline-prompt active-text="查汇率" inactive-text="查汇率"
                    style="width: 100px;" @change="handleSwitchChange" />
                </div>
                <div style="width: 104%; display: flex;justify-content: space-between;">
                  <el-switch v-model="switchStatus8" inline-prompt active-text="&emsp;查余额&emsp;" inactive-text="查余额"
                    style="width: 100px;float: left;" @change="handleSwitchChange" />
                  <el-switch v-model="switchStatus9" inline-prompt active-text="&emsp;查预付&emsp;" inactive-text="查预付"
                    style="width: 100px;" @change="handleSwitchChange" />
                  <el-switch v-model="switchStatus10" inline-prompt active-text="&emsp;查订单&emsp;" inactive-text="查订单"
                    style="width: 100px;" @change="handleSwitchChange" />
                </div>
                <div style="width: 100%;">
                  <el-switch v-model="switchStatus11" inline-prompt
                    active-text="&emsp;&emsp;&emsp;&emsp;成功率&emsp;&emsp;&emsp;&emsp;" inactive-text="成功率" flex="1"
                    @change="handleSwitchChange" />
                  <el-switch v-model="switchStatus12" inline-prompt active-text="&emsp;&emsp;&emsp;成功金额&emsp;&emsp;&emsp;"
                    inactive-text="成功金额" flex="1" @change="handleSwitchChange" style="float: right;" />
                </div>
              </div>
            </el-form-item>
          </el-form>
          <div class="bottom" style="display:flex;justify-content:flex-end">

            <span style="color:#1890ff;margin-right:10px;">刷新</span>
           <!--  <span style="color:red;margin-right:20px;">删除</span> -->
            <el-popconfirm title="确定删除Telegranm机器人?" width="230px" >
                <template v-slot:reference="{ confirm }">
                  <span style="color:red;margin-right:20px;">删除</span>
                </template>
              </el-popconfirm>
          </div>
        </div>
      </div>
      <div class="right" style="width: 60%;height: 1000px;border-left:1px solid lightgray;">
        <p style="font-size: 22px;padding:0px 20px;font-weight:200;">查询结果配置</p>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="padding:0px 20px;">
          <el-tab-pane label="支付配置" name="first">
            <el-table :data="tableData" border
              style="width: 100%;height: 350px;overflow-y: auto; background-color: transparent;">
              <el-table-column label="结果项" width="150" style="background-color: transparent;">
                <template #default="{ row }" style="display: flex;align-items: center;">
                  <!-- 这里添加图标，你可以根据 row 的值或其他条件来决定显示哪个图标 -->
                  <el-icon v-if="row.iconType === 'plus'" class="plus-icon" style="">
                    <Plus />
                  </el-icon>
                  <el-icon v-else-if="row.iconType === 'minus'" class="minus-icon" style="color: lightskyblue;">
                    <Platform />
                  </el-icon>
                  <el-icon v-else-if="row.iconType === 'remove'" class="minus-icon" style="color: red">
                    <RemoveFilled />
                  </el-icon>
                  <el-icon v-else-if="row.iconType === 'remove'" class="minus-icon" style="color: red">
                    <RemoveFilled />
                  </el-icon>
                  <!-- 其他条件和图标 -->
                  {{ row.date }}
                </template>
              </el-table-column>

              <el-table-column prop="name" label="结果描述" width="500">
                <template #default="{ row }">
                  <el-tooltip :content="row.name" placement="top">
                    <div>{{ row.name }}</div>
                  </el-tooltip>
                </template>
              </el-table-column>

              <el-table-column prop="address" label="操作" min-width="100">
                <template #default="scope">
                  <div style="display: flex;">
                    <el-button v-hasPerm="['sys:dict_type:edit']" type="primary" link size="small"
                      style="font-size: 16px;" @click="bianji2 = true">编辑</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="代付配置" name="second">
            <el-table :data="tableData1" border style="width: 100%; height: 400px; overflow-y: auto;">
              <el-table-column prop="date" label="结果项" width="150">

              </el-table-column>
              <el-table-column prop="name" label="结果描述" width="500" />
              <el-table-column prop="address" label="操作" min-width="100">
                <template #default="scope">
                  <div style="display: flex;">
                    <el-button v-hasPerm="['sys:dict_type:edit']" type="primary" link size="small"
                      style="font-size: 16px;">
                      详情
                    </el-button>
                  </div>
                </template>
              </el-table-column>
              <template #empty>
                <el-empty description="暂无数据" style="height: 350px;" />
              </template>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div style="width: 820px;height: 50px;border-bottom: 1px solid lightgray;"></div>
        <p style="font-size: 22px;font-weight: 200;padding:0px 20px;margin-top:40px">创建及配置说明</p>

        <el-collapse v-model="activeNames" @change="handleChange" style="margin:0px 20px;border:1px solid lightgray">
          <el-collapse-item title="创建Telegram机器人" name="1" class="custom-collapse-item"
            style="padding-left:10px;background-color:white">
            <p style="color:red">1. Telegram 搜索 BotFather</p>
            <img src="../../../assets/1.png" />
            <p style="color:red">2. 指令：/newbot 创建机器人</p>
            <img src="../../../assets/2.png" />
            <p style="color:red">3. 输入机器人昵称，例：易支付精灵</p>
            <img src="../../../assets/4.png" />
            <p style="color:red">4. 输入机器人名称（需要是"bot"结尾），例：yizhifu_jingling_bot</p>
            <img src="../../../assets/3.png" />
            <p style="color:red">5. 机器人创建成功，保存机器人token，例：5785247689:AAEv2ZbYyKTfxxxxL3iXcJNIAAAAAAAAixw</p>

          </el-collapse-item>
          <el-collapse-item title="配置Telegram机器人" name="2" class="custom-collapse-item"
            style="padding-left:10px;background-color:white">
            <p style="color:red">1. Telegram 搜索 BotFather</p>
            <img src="../../../assets/1.png" />
            <p style="color:red">2. 指令：/mybots 获取机器人列表</p>
            <img src="../../../assets/2.png" />
            <p style="color:red">3. 选择要配置的机器人</p>
            <img src="../../../assets/4.png" />
            <p style="color:red">4. 配置机器人头像：Edit Bot => Edit Botpic => 发送机器人头像文件</p>
            <img src="../../../assets/3.png" />
            <p style="color:red">5. 关闭机器人群消息隐私开关：Bot Settings => Group Privacy => Turn off</p>
            <img src="../../../assets/4.png" />
          </el-collapse-item>
          <el-collapse-item title="后台配置机器人" name="3" class="custom-collapse-item"
            style="padding-left:10px;background-color:white">
            <p style="color:red">1. 菜单中点击系统配置-立即配置</p>
            <img src="../../../assets/1.png" />
            <p style="color:red">2. 将之前保存的机器人 token 复制进去，然后保存，随后点击刷新</p>
            <img src="../../../assets/2.png" />
            <p style="color:red">3. 设置机器人管理，点击系统配置，在最下面找到【系统Telegram管理员】这个配置，点击编辑按钮，在输入框中，输入要设置的人员的飞机号，例如 @xiaoming
              ，记得前面加上 @</p>
            <img src="../../../assets/4.png" />
          </el-collapse-item>
        </el-collapse>

      </div>
    </div>

    <!--字典数据弹窗-->
    <el-dialog v-model="dictDataDialog.visible" :title="dictDataDialog.title" width="1000px" @close="closeDictDialog">
      <dict-item v-model:typeCode="selectedDictType.typeCode" v-model:typeName="selectedDictType.typeName" />
    </el-dialog>
    <!-- 编辑机器人 -->
    <el-dialog v-model="bianji" title="配置Telegram机器人" width="600px">
      <el-form :rules="rules">
        <el-form-item label="API Token:" prop="token">
          <el-input placeholder="请输入API Token" />
        </el-form-item>
      </el-form>
      <span class="dialog-footer" style="margin-top:20px;display:flex;justify-content:flex-end">
        <el-button type="primary" @click="bianji = false">确认</el-button>
        <el-button type="" @click="bianji = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 操作 编辑 -->
    <el-dialog v-model="bianji2" title="编辑" width="600px">
      <el-form :rules="rules" label-width="100px" style="margin-top:-30px">
        <el-form-item label="结果项：" prop="" style="align-items:center">
          <p>未支付</p>
        </el-form-item>
        <el-form-item label="结果描述：" prop="">
          <el-input type="textarea" :rows="5" placeholder="单号查询未支付，请核对单号是否正确"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" style="margin-top:20px;display:flex;justify-content:flex-end">
        <el-button type="primary" @click="bianji2 = false">确认</el-button>
        <el-button type="" @click="bianji2 = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.app-container {
  height: 100%;

  .table-container {
    height: 100%;

    .el-card__body {
      height: 100%;
    }
  }
}

.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-table__body {
  background-color: transparent !important;
}

/* 样式中设置箭头位置 */
.custom-collapse-item .el-collapse-item__arrow {
  left: 10px !important;
  /* 使用 !important 提高优先级 */
  right: auto !important;
  /* 取消右侧的默认样式 */
}

.custom-collapse-item {
  p {
    font-size: 17px;
    font-weight: 600;
  }

  img {
    width: 450px;
  }
}

:deep(.el-collapse-item__header) {
  position: relative;
  width: 500px;
}

:deep(.el-collapse-item__header::before) {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid gray;
  /* Replace #000 with your desired color */
  margin-right: 10px;
  margin-left: 10px;
}

:deep(.el-collapse-item__arrow) {
  display: none;
}

:deep(.el-collapse-item.is-active .el-collapse-item__header::before) {
  transform: translate(-50%) rotate(90deg);
}

.plus-icon,
.minus-icon {
  font-size: 18px;
  margin-right: 5px;
  /* 调整图标与文字之间的间距 */
  color: green;
  /* 根据需要设置图标的颜色 */
  line-height: 1;
}
</style>
